<template>
  <div>
    <el-form
      :inline="true"
      label-width="120px"
    >
      <el-form-item label="集群名称">
        <el-input
          v-model="aForm.name"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="集群版本">
        <el-select
          v-model="aForm.versions"
          placeholder="请选择"
          style="width: 190px"
          clearable
        >
          <el-option
            v-for="val in versionList"
            :key="val"
            :label="val"
            :value="val"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="访问地址">
        <el-input
          v-model="aForm.url"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="集群标识">
        <el-input
          v-model="aForm.flag"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="子集群信息">
        <el-input
          v-model="aForm.info"
          placeholder="请输入"
          style="width: 510px"
        />
      </el-form-item>
      <el-form-item label="参数配置">
        <el-input
          v-model="aForm.config"
          placeholder="请输入"
          type="textarea"
          :rows="6"
          style="width: 700px"
        />
      </el-form-item>
    </el-form>
    <div style="text-align: center; margin-top: 20px">
      <el-button
        type="primary"
        size="mini"
        @click="leadFlag = true"
      >
        表清单导入/表清单文件
        <el-tooltip
          class="item"
          effect="dark"
          content="下一页"
          placement="top"
        >
          <i class="el-icon-question" />
        </el-tooltip>
      </el-button>
      <el-button
        type="primary"
        size="mini"
        @click="ruleFlag = true"
      >脱敏设置</el-button>
      <el-button
        type="primary"
        size="mini"
        @click="dCloses"
      >完成</el-button>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      :before-close="leadCloses"
      :visible.sync="leadFlag"
      append-to-body
      title="导入"
      width="800px"
    >
      <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        multiple
        :limit="3"
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
        <el-button
          size="small"
          type="primary"
        >点击上传</el-button>
        <template #tip>
          <div class="el-upload__tip">不能上传 jpg/png 文件，且不超过 50M</div>
        </template>
      </el-upload>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="toNext"
        >完成</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :before-close="ruleCloses"
      :visible.sync="ruleFlag"
      append-to-body
      title="脱敏规则"
      width="800px"
    >
      <Desensitize />
    </el-dialog>
  </div>
</template>

<script>
import Desensitize from './Desensitize'
export default {
  components: {
    Desensitize
  },
  data() {
    return {
      aForm: {
        name: '',
        versions: '',
        url: '',
        flag: '',
        info: '',
        config: '',
        libName: '',
        tblName: '',
        libNames: '',
        tblNames: '',
        chinese: ''
      },
      versionList: ['CDH 6.3.2 (Parcel)'],
      leadFlag: false,
      fileList: [],
      ruleFlag: false
    }
  },
  methods: {
    dCloses() {
      this.$emit('dCloses')
    },
    leadCloses() {
      this.leadFlag = false
    },
    handlePreview(file) {
      console.log(file)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      )
    },
    ruleCloses() {
      this.ruleFlag = false
    },
    toNext() {
      this.$emit('next')
      this.leadCloses()
    }
  }
}
</script>

<style>
</style>
